<script setup>
import { ref } from 'vue'
import { getconsumerDetail } from '@/api/consumer' // 假设这是获取管理员详情的API

// 是否显示抽屉
const drawer = ref(false)
const consumer = ref({})

// 定义一个供父组件调用的打开抽屉的方法
const openDrawer = async (row) => {
  drawer.value = true
  // 异步请求
  const { data } = await getconsumerDetail(row.id)
  consumer.value = data
}

// 暴露方法
defineExpose({
  openDrawer
})
</script>

<template>
  <el-drawer v-model="drawer" direction="rtl" size="50%">
    <template #header>
      <h4>客户详情信息</h4>
    </template>
    <template #default>
      <div>
        <div>用户名：{{consumer.username }}</div>
        <div>密码：{{consumer.password }}</div>
        <div>手机号：{{ consumer.phoneNum }}</div>
        <div>电子邮件：{{consumer.email }}</div>
        <div>住址：{{ consumer.location }}</div>
        <div>创建时间：{{consumer.createTime }}</div>
        <div>上次登录时间：{{ consumer.updateTime }}</div>
        <div>生日：{{consumer.birth }}</div>
      </div>
    </template>
    <template #footer>
      <div style="flex: auto">
        <el-button @click="drawer = false">关闭</el-button>
      </div>
    </template>
  </el-drawer>
</template>

<style scoped>
.pic img{
  width: 120pz;
  height: 120px;  

}
</style>